@import "~src/web/variables";

:host {
    display: flex;
    white-space: nowrap;

    #{$app-prefix}-unread-badge {
        font-size: $app-font-size-base-small;
    }

    .fa {
        display: flex;
        align-self: center;
    }

    .fa::before {
        content: $fa-var-bell; // default/unread/bell icon
    }

    .is-custom-true {
        &.is-folder-true {
            .fa::before {
                content: $fa-var-folder;
            }
        }

        &.is-folder-false {
            .fa::before {
                content: $fa-var-tag;
            }
        }
    }

    .folder-id {
        &-0 { // inbox
            .fa::before {
                content: $fa-var-inbox;
            }
        }

        &-8 { // drafts
            .fa::before {
                content: $fa-var-paper-plane-o;
            }
        }

        &-7 { // sent
            .fa::before {
                content: $fa-var-paper-plane-o;
            }
        }

        &-10 { // starred
            .fa::before {
                content: $fa-var-star;;
            }
        }

        &-6 { // archive
            .fa::before {
                content: $fa-var-archive;
                font-size: 87%;
            }
        }

        &-4 { // spam
            .fa::before {
                content: $fa-var-ban;
            }
        }

        &-3 { // trash
            .fa::before {
                content: $fa-var-trash-o;
            }
        }

        &-5 { // all
            .fa::before {
                content: $fa-var-globe;
            }
        }
    }
}
